
<template>
    <div ref="main" :style="{ width: width, height, height }"></div>
</template>

<script>
    import * as monaco from "monaco-editor";
    // import {format} from "sql-formatter";
    // import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
    export default {
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "300px",
            },
            language: {
                type: String,
                default: "java",
            },
            opts:{
                type: Object,
                default: null,
            },
            data:{
                type: String,
                default: '',
            }
        },
        data() {
            return {
                monacoEditor: null,
                value: "",
                defaultOption : {
                    theme: "vs", // 主题 //官方自带三种主题vs, hc-black, or vs-dark
                    value: this.value, // 默认显示的值
                    language: this.language,
                    folding: true, // 是否折叠
                    foldingHighlight: true, // 折叠等高线
                    foldingStrategy: "indentation", // 折叠方式  auto | indentation
                    showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
                    disableLayerHinting: true, // 等宽优化
                    emptySelectionClipboard: false, // 空选择剪切板
                    selectionClipboard: false, // 选择剪切板
                    automaticLayout: true, // 自动布局
                    codeLens: false, // 代码镜头
                    scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
                    colorDecorators: true, // 颜色装饰器
                    accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
                    lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
                    lineNumbersMinChars: 5, // 行号最小字符   number
                    enableSplitViewResizing: false,
                    readOnly: false, //是否只读  取值 true | false
                    wordWrap: "off", // 自动换行
                    cursorStyle: 'line', //光标样式
                    quickSuggestionsDelay: 100, //代码提示延时
                    fontSize: 15, //字体大小
                    glyphMargin: true, //字形边缘
                    selectOnLineNumbers: true,//显示行号
                }
            };
        },
        mounted() {
            this.init();
            this.monacoEditor.setValue(this.data)
        },
        watch:{
        },
        methods: {
            // 供父组件调用手动获取值
            getValue () {
                return this.monacoEditor.getValue()
            },
            setValue(data) {
                this.monacoEditor.setValue(data)
            },
            init() {
                // 初始化container的内容，销毁之前生成的编辑器
                this.$refs.main.innerHTML = ''
                //创建编辑器 传入容器、配置
                this.monacoEditor = monaco.editor.create(this.$refs.main, {
                    ...this.defaultOption,...this.opts

                });
                //监听编辑器内容变化 返回当前值
                this.monacoEditor.onDidChangeModelContent(() => {
                    this.$emit('change', this.monacoEditor.getValue())
                })
            },
        },
    };
</script>
<style scoped lang="less">
    /deep/ .margin{
        margin: 0 !important;
    }
</style>
